/** @format */

// 存放月数据
var MonthxAxis = [];
var MonthyAxis = [];
// 存放周数据
var xAxis = [];
var yAxis = [];
var data = [];

// 曲线图定义节点与配置项
var chartDom = document.getElementById("Chart");
var myChart = echarts.init(chartDom);
var ChartOption;
// 饼状图定义节点与配置项
var PieChartDom = document.getElementById("PieChart");
var PieChart = echarts.init(PieChartDom);
var PieChartOption;
// 柱状图片定义节点与配置项
var HistogramChartDom = document.getElementById("Histogram");
var HistogramChart = echarts.init(HistogramChartDom);
var HistogramChartOption;

// 网络请求
function requestJSON(type) {
	try {
		let url = `https://edu.telking.com/api/?type=${type}`;
		let xhr = new XMLHttpRequest();
		xhr.open("get", url, false);
		xhr.onload = function () {
			let res = JSON.parse(xhr.response);
			if (type == "week") {
				this.xAxis = res.data.xAxis;
				this.yAxis = res.data.series;
				trans(this.yAxis, this.xAxis, type);
			} else if (type == "month") {
				this.MonthxAxis = res.data.xAxis;
				this.MonthyAxis = res.data.series;
				trans(this.MonthyAxis, this.MonthxAxis, type);
			} else {
				console.error("只能获取week与month类型的数据");
				alert("只能获取week与month类型的数据");
			}
		};
		xhr.onerror = function (error) {
			console.log(error);
		};
		xhr.send();
	} catch (error) {
		console.log(error);
		alert("出现错误");
	}
}
//数据处理
var trans = function (a, b, type) {
	if (type === "week") {
		// 两个数组转换为一个对象的两个属性
		const f1 = (key, arr) =>
			arr.map((item) => ({
				[key]: item,
			}));
		const getMaxArr = (a, b) => (a.length >= b.length ? a : b);
		const mergeArr = (oldArr, arr) =>
			oldArr.map((item, index) => ({
				value: item,
				...arr[index],
			}));

		let list1 = f1("value", a);
		let list2 = f1("name", b);
		let newArr = mergeArr(
			getMaxArr(a, b),
			a.length >= b.length ? list2 : list1
		);
		// 柱状图与饼状图的配置项数据获取
		this.xAxis = b;
		this.yAxis = a;
		this.data = newArr;
	} else if (type === "month") {
		// 曲线图的配置项数据获取
		this.MonthxAxis = b;
		this.MonthyAxis = a;
	} else return 0;
};

var sendRequire = (function () {
	requestJSON("week");
	requestJSON("month");
	console.log("检测月数据", this.MonthxAxis, this.MonthyAxis);
	console.log("检测饼状图数据", this.data);
	console.log("检测柱状图数据", this.xAxis, this.yAxis);
})();

//曲线图的配置
ChartOption = {
	title: {
		text: "曲线图数据展示",
		left: "center",
		top: "5%",
	},
	xAxis: {
		type: "category",
		data: this.MonthxAxis,
		axisTick: {
			show: false,
		},
	},
	yAxis: {
		type: "value",
		axisLine: {
			show: false,
		},
		axisTick: {
			show: false,
		},
		axisLabel: { formatter: "{value} 人" },
	},
	series: [
		{
			data: this.MonthyAxis,
			type: "line",
			color: "#4586ef",
			areaStyle: { color: "#f3f7fe" },
			smooth: true,
			label: {
				show: true,
			},
		},
	],
	grid: {
		top: "20%",
		left: "3%",
		right: "5%",
		bottom: "5%",
		containLabel: true,
	},
};
ChartOption && myChart.setOption(ChartOption);

//饼状图的配置
PieChartOption = {
	title: {
		text: "饼状图数据展示",
		left: "center",
		top: "30px",
	},
	tooltip: {
		trigger: "item",
	},
	series: [
		{
			type: "pie",
			radius: "70%",
			data: this.data,
			center: ["50%", "55%"],
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: "rgba(0, 0, 0, 0.5)",
				},
			},
		},
	],
};
PieChartOption && PieChart.setOption(PieChartOption);

//柱状图的配置
HistogramChartOption = {
	title: {
		show: true, //标题是否显示
		text: "柱状图数据展示", //指明标题的文字
		left: "center",
		top: "5%",
	},
	xAxis: {
		type: "category",
		data: this.xAxis,
	},
	yAxis: {
		name: "商品销量",
		nameLocation: "end",
		type: "value",
		axisLine: {
			show: false,
		},
	},
	series: [
		{
			data: this.yAxis,
			type: "bar",
			barWidth: "30%",
			color: "#4587f0",
		},
	],
	grid: {
		show: false,
		top: "20%",
		right: "10%",
		bottom: "5%",
		left: "10%",
		containLabel: true,
	},
};
HistogramChartOption && HistogramChart.setOption(HistogramChartOption);
